

import axios from 'axios';
import React, { useEffect, useState } from 'react'
const cache: Map<string, any> = new Map()
export const createSvgIcon = (url: string): React.FC<React.SVGAttributes<{}>> => {
    return (props) => {
        const [svg, setSvg] = useState<string[]>(cache.get(url))
        useEffect(() => {
            if (cache.has(url)) {
                setSvg(cache.get(url)!)
                return;
            }
            axios.get(url).then(res => res.data).then((svg: string) => {
                const pattern = /<path\sd="(.*?)"[^>]*>/g
                const res = [];
                let match;
                while ((match = pattern.exec(svg)) !== null) {
                    const content = match[1].trim();
                    res.push(content);
                }
                cache.set(url, res)
                setSvg(res)
            })
        }, [])
        return <svg {...props}>
            {svg?.map(d => <path d={d} fill={props.fill}></path>)}
        </svg>
    }
}